<script setup lang="ts">
import { deleteRolePark, getAllFunction, getRoleList, getRolEmployee } from "@/api/system";
import type { EmployeeRow, Params, RoleALLTree, RoleData } from "@/types/system";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";

const Role = ref<RoleData[]>([]);
// 获取角色列表
const getRoleAll = async () => {
  const res = await getRoleList();
  Role.value = res.data;
};
const treeArray = ref<RoleALLTree[]>([]);
const total=ref(0)
// 获取树形组件
const getTreeAll = async () => {
  const res = await getAllFunction();
  treeArray.value = res.data;
  // console.log("2228822", res);
  getEmployee()
};
onMounted(() => {
  getRoleAll();
  getTreeAll();
});

const tabName = ref("first");
// 动态添加类名
const active=ref<number>(0)
// 查找成员
const Params=ref<Params>({
  page:1,
  pageSize:10
})
const EmployeeList=ref<EmployeeRow[]>([])
const getEmployee=async ()=>{
  const id=Role.value[active.value].roleId
  const res= await getRolEmployee(id as number,Params.value)
  EmployeeList.value=res.data.rows
  total.value=res.data.total
}
const tabsActive=(index:number)=>{
active.value=index
getEmployee()
}
// 删除角色
const deleteRole=async (id:number)=>{
  const res= await deleteRolePark(id)
  if(res.code===10000){
    ElMessage.success('删除成功')
    getRoleAll()
  }
}
</script>

<template>
  <div class="role-container">
    <div class="left-wrapper">
      <div class="role-item" :class="active===index? 'active':''" v-for="(item,index) in Role" :key="item.roleId" @click="tabsActive(index)">
        <div class="role-info">
          <img v-if="active!==index" src="@/assets/user.svg" class="icon" />
          <img v-else src="@/assets/user-active.svg" class="icon" />
        </div>
        <div class="role-title">{{ item.roleName }}</div>
        <div class="more">
          <!-- <img src="@/assets/more.svg" class="icon" /> -->
        <el-dropdown>

          <img src="@/assets/more.svg" class="icon" >
        <arrow-down />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-button  text @click="$router.push(`/addPark/${item.roleId}`)">编辑角色</el-button>
            </el-dropdown-item>
          <el-dropdown-item>
            <el-button text type="danger" @click="deleteRole(item.roleId as number)">删除</el-button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
        </div>
      </div>
      <el-button class="addBtn" size="small" @click="$router.push('/addPark')">添加角色</el-button>
    </div>
    <div class="right-wrapper" style="width: 100%;">
      <el-tabs v-model="tabName">
        <el-tab-pane label="功能权限" name="first">
          <div class="tree-table">
            <div class="tree-item" v-for="item in treeArray" :key="item.id">
              <div class="tree-title">{{ item.title }}</div>
              <div class="tree-wrapper">
                <el-tree
                  style="max-width: 600px"
                  :data="item.children"
                  show-checkbox
                  node-key="id"
                  :props="{label: 'title',disabled:()=>true }"
                  default-expand-all
                  ref="treeRefs"
                />
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`成员(${total})`" name="second">
          <div style="width: 100%;">
            <el-table :data="EmployeeList">
              <el-table-column prop="id" label="序号" ></el-table-column>
              <el-table-column prop="name" label="员工姓名" ></el-table-column>
              <el-table-column prop="userName" label="登录账号" ></el-table-column>
            </el-table>
            <el-pagination
            v-model:current-page="Params.page"
            v-model:page-size="Params.pageSize"
            :page-sizes="[1, 2, 3, 4]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @change="getEmployee"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.role-container {
  display: flex;
  font-size: 14px;
  background-color: #fff;

  .left-wrapper {
    width: 200px;
    border-right: 1px solid #e4e7ec;
    padding: 4px;
    text-align: center;

    .role-item {
      position: relative;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      cursor: pointer;

      &.active {
        background: #edf5ff;
        color: #4770ff;
      }
    }

    .role-info {
      display: flex;
      align-items: center;

      .icon {
        margin-right: 10px;
        width: 20px;
      }
    }

    .more {
      display: flex;
      align-items: center;
      .icon {
        width: 15px;
      }
    }

    .addBtn {
      width: 100%;
      margin-top: 20px;
    }
  }
  .tree-table {
    display: flex;
    justify-content: space-between;

    .tree-item {
      flex: 1;
      border-right: 1px solid #e4e7ec;
      padding: 0px 4px;
      text-align: center;
      .tree-title {
        background: #f5f7fa;
        text-align: center;
        padding: 10px 0;
        margin-bottom: 12px;
      }
    }
  }
}
</style>
